<div id="serachDIV">
    搜索框
</div>
<div id="tableDiv"></div>
<script type="text/html" id="serachContent">
    <div class="layui-form layui-form-pane" style="padding: 15px;">
        <div class="layui-row layui-col-space10">
            <!-- Supplier Category -->
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商分类</label>
                    <div class="layui-input-block">
                        <select name="supplierCategory" id="supplierCategory">
                            <option value="">请选择供应商分类</option>
                            <option value="category1">分类1</option>
                            <option value="category2">分类2</option>
                            <!-- Add more categories as needed -->
                        </select>
                    </div>
                </div>
            </div>

            <!-- Exchange Type -->
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">换货类型</label>
                    <div class="layui-input-block">
                        <select name="exchangeType" id="exchangeType">
                            <option value="">请选择换货类型</option>
                            <option value="type1">类型1</option>
                            <option value="type2">类型2</option>
                            <!-- Add more types as needed -->
                        </select>
                    </div>
                </div>
            </div>

            <!-- Status -->
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">按状态</label>
                    <div class="layui-input-block">
                        <select name="status" id="status">
                            <option value="">请选择状态</option>
                            <option value="pending">待处理</option>
                            <option value="completed">已完成</option>
                            <option value="canceled">已取消</option>
                            <!-- Add more statuses as needed -->
                        </select>
                    </div>
                </div>
            </div>

            <!-- Supplier Name -->
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">供应商名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="supplierName" id="supplierName" placeholder="请输入供应商名称"
                               class="layui-input">
                    </div>
                </div>
            </div>

            <!-- Exchange Record Code -->
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">换货记录编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="exchangeRecordCode" id="exchangeRecordCode"
                               placeholder="请输入换货记录编码" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- Exchange Order Code -->
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">换货订单编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="exchangeOrderCode" id="exchangeOrderCode"
                               placeholder="请输入换货订单编码" class="layui-input">
                    </div>
                </div>
            </div>

            <!-- Search Button -->
            <div class="layui-col-md12">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>

        </div>
    </div>

</script>
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'upload', 'tree', 'laytpl'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var syncProductName = "";
        var syncProductId = 0;
        laytpl(serachContent.innerHTML).render({}, function (html) {
            $('#searchDiv').html(html);
        });
    })
</script>